<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="员工绩效明细表"
      row-key="id"
      :columns="columns"
      :request-api="getEmployeePerformanceList"
      :init-param="initData"
      :show-summary="true"
      :summary-method="getSummaries"
      :data-callback="dataCallback"
    >
      <!-- 表格 header 按钮 -->
      <!-- <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="onExcel"> 导出报表 </el-button>
      </template> -->
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="employeePerformance">
import { ref, reactive } from "vue";
import { Inventory } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getEmployeePerformanceList } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { getFoodCategoryList } from "@/api/modules/goods";
import { CirclePlus } from "@element-plus/icons-vue";
import { getUserList } from "@/api/modules/system";

const proTable = ref<ProTableInstance>();
// 新建默认数据
const initData = reactive({
  reportId: 115
  // dataTimeRange: ["2023-11-14", "2023-12-14"]
});

const columns: ColumnProps<Inventory.ResCustomList>[] = [
  {
    type: "index",
    label: "序号",
    width: 80,
    search: {
      el: "date-picker",
      label: "日期",
      key: "dataTimeRange",
      defaultValue: [formatDate(-1, "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "billerName",
    label: "下单人",
    align: "left",
    width: 120,
    search: { el: "select", key: "billerId" },
    enum: () => getUserList({ pageNum: 1, pageSize: 9999 }),
    fieldNames: { label: "nickName", value: "id" },
    isFilterEnum: false
  },
  { sortable: true, prop: "foodName", label: "菜品", width: 150, align: "left", search: { el: "input" } },
  {
    sortable: true,
    prop: "foodCategoryName",
    label: "菜品分类",
    minWidth: 120,
    align: "left",
    enum: () => getFoodCategoryList({ pageNum: 1, pageSize: 9999 }),
    search: { el: "tree-select", key: "foodCategoryId" },
    fieldNames: { label: "name", value: "id" },
    isFilterEnum: false
  },
  { sortable: true, prop: "specName", label: "规格", width: 120, align: "left" },
  { sortable: true, prop: "avgPrice", label: "均价", width: 100, align: "left" },
  { sortable: true, prop: "amount", label: "原金额", width: 100, align: "left" },
  { sortable: true, prop: "discountAmount", label: "折扣金额", width: 150, align: "left" },
  // { sortable: true, prop: "realAmount", label: "菜品金额", width: 120, align: "left" },
  { sortable: true, prop: "giftAmount", label: "赠送金额", width: 120, align: "left" },
  // { sortable: true, prop: "discount", label: "折扣", width: 100 },
  // { sortable: true, prop: "discountAmount", label: "折扣金额", width: 120, align: "left" },
  { sortable: true, prop: "realAmount", label: "菜品金额", width: 120, align: "left" },
  { sortable: true, prop: "feedAmount", label: "加料金额", width: 120, align: "left" },
  { sortable: true, prop: "allAmount", label: "小计", width: 100, align: "left" },
  { sortable: true, prop: "quantity", label: "数量", width: 100, align: "left" },
  { sortable: true, prop: "refQuantity", label: "退货数量", width: 120, align: "left" },
  { sortable: true, prop: "giftQuantity", label: "赠送数量", width: 120, align: "left" },
  { sortable: true, prop: "saleQuantity", label: "销售数量", align: "left", width: 120 }
];

const summary = ref([]);
const dataCallback = (data: any) => {
  summary.value = data.summary;
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// const onExcel = () => {
//   getEmployeePerformanceList({ export: 1, reportId: 101, ...proTable.value?.searchParam }).then(res => {
//     window.location.href = res.data;
//   });
// };

const getSummaries = (param: { columns: any; data: any }) => {
  // const { columns } = param;
  // const sums: string[] = [];
  // columns.forEach((column: any, index: any) => {
  //   sums[index] = summary.value[index];
  //   return sums;
  // });
  return summary.value;
};
</script>
